<template>
  <div class="multistage">
    <div v-if="children.length !== 0" class="comments">
      <div class="comment" v-for="(comment,index) in children" :key="comment.cid">
        <div style="float: left" class="user-face">
          <el-avatar class="header-img" :size="40" :src="comment.avatar"></el-avatar>
        </div>
        <div style="margin-left: 60px" class="con">
          <div class="user-name">
            <span style="font-weight: bold; margin-right: 20px;">{{ comment.username }}</span>
          </div>
          <p class="context">
            <span v-if="comment.level>2">回复 <span class="replayName">@{{comment.pusername}}</span> ：</span>
            {{ comment.content }}
          </p>
          <div>
            <span class="info">{{ comment.publishTime }}</span>
            <el-button type="text" class="info" @click="showReplayInput(comment.cid)">回复</el-button>
          </div>
        </div>
        <div style="margin-right: 20px" v-if="commentIndex===comment.cid" class="center">
          <el-avatar class="header-img" :size="40" :src="user.avatar" style="margin-right: 20px"></el-avatar>
          <el-input :placeholder="'回复 @'+comment.username" v-model="replayContent"
                    style="width: 75%; margin-right: 20px"></el-input>
          <el-button class="reply-btn" size="medium" @click="replayComment(comment.username,comment.cid,comment.bid,comment.level)"
                     type="primary">发表评论
          </el-button>
        </div>
        <ChildComment :children="comment.children"></ChildComment>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  inject:['reload'],
  name: "ChildComment",
  props: ['children'],
  data() {
    return {
      commentIndex: this.$store.state.replayId,
      user: this.$store.state.user,
      replayContent: '',
    }
  },
  methods: {
    replayComment(pusername, pid, bid, level) {
      if (this.user.username === '') {
        this.$message.error("请先登录再发表评论");
      } else {
        if (this.replayContent !== '') {
          let comment = {
            bid: bid,
            pid: pid,
            username: this.user.username,
            pusername: pusername,
            level: level,
            content: this.replayContent,
          };
          this.axios.post("/blog/insertComment", comment).then((response) => {
            this.reload();
          })
        } else {
          this.$message.error("评论内容为空");
        }
      }
    },
    showReplayInput(id) {
      this.$store.commit("setReplayId",id);
    }
  },
  watch: {
    "$store.state.user"() {
      this.user = this.$store.getters.getUser;
    },
    "$store.state.replayId"(){
      this.commentIndex = this.$store.getters.getReplayId;
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
.center {
  display: flex;
  align-items: center;
  margin-bottom: 20px
}

.user-face {
  float: left;
  margin: 24px 0 0 5px;
  position: relative;
}

.con {
  position: relative;
  margin-left: 85px;
  padding: 22px 0 14px 0;
  border-top: 1px solid #e5e9ef;
}

.user-name {
  padding: 0 0 4px;
}

.context {
  line-height: 20px;
  padding: 2px 0;
  font-size: 14px;
  text-shadow: none;
  overflow: hidden;
  margin: 0;
}

.info {
  margin-right: 20px;
  font-size: 12px;
  color: gray
}

.el-button.info:hover, .replayName{
  color: deepskyblue;
}
</style>
